<template>
  <div class="shields-tag" :style="'color:' + fontColor">
    <div :style="'background-color:' + keybgColor + ';width:' + tagWidth">{{ tagKey }}</div>
    <div :style="'background-color:' + valuebgColor">{{ tagValue }}</div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps(
  {
    tagKey: {
      type: String,
      default: ""
    },
    tagValue: {
      type: String,
      default: ""
    },
    tagWidth: {
      type: String,
      default: "auto"
    },
    fontColor: {
      type: String,
      default: "#e0e0e0"
    },
    keybgColor: {
      type: String,
      default: "#666666"
    },
    valuebgColor: {
      type: String,
      default: "#3e3e3e"
    }
  }
)
</script>

<style scoped lang="scss">
.shields-tag {
  @include flex(row, flex-start, center);
  @include font(12px, 500);
  line-height: 15px;
  font-family: "Consolas", Monaco, sans-serif;
  transition: box-shadow 0.3s;
  margin: 3px 3px;
  cursor: pointer;

  &>div {
    height: 100%;
    padding: 3px 7px;
  }

  &:hover {
    box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, .3);
  }

  span {
    padding: 3px 7px;
  }

}
</style>
